
<div id="cat_template" @click="pickerHide">
  <p class="cat-tips">
    迁移商品请选择正确的类目，迁移完成后将会进入商家后台待发布商品列表，发布时请务必检查所有字段的正确性。
  </p>

  <div class="cat-header">
    <div class="cat-header-shop">
      <span class="shop-forum">{{forum}}</span>
      <span class="shop-name">{{fromShopName}}</span>
    </div>
    <div class="cat-header-tips">
      <span class="tips-text">复制商品</span>
      <span class="tips-icon"></span>
    </div>
    <div class="cat-header-shop">
      <span class="shop-forum">云工厂</span>
      <span class="shop-name">{{toShopName}}</span>
    </div>
  </div>

  <div class="dropdown-menu category">
    <div class="form-item-flex">
      <label class="category-title">商品类目</label>
      <div @click.stop class="form-control from-picker-btn">
        <input class="form-control" style="border: none;" v-model="catKeywords" placeholder="请选择行业（可直接输入名称查询）" @focus="pickerShow()" @change="search()" />
        <span class="picker-icon"></span>
      </div>
      <span class="cat-tips">按回车键搜索</span>
    </div>
    <div id="industry">
      <div v-if="!searchPiker" class="industry" @click.stop>
        <div class="industry-loading" v-if="loading">
          <span class="industry-loading-content"></span>
        </div>
        <ul v-for="(data, item) in catDataList" :key="`data${item}`">
          <li v-for="(cat, index) in data" :key="`item${item}_${index}`">
            <a @click="getCatDataSource(item + 1, cat)" :class="[(catSelected[item] && catSelected[item].id===cat.id)?'active':'','clearfix']"><span class="fl">{{cat.tradeName}}</span></a>
          </li>
        </ul>
      </div>
      <div v-else class="industry" @click.stop>
        <div class="industry-loading" v-if="loading">
          <span class="industry-loading-content"></span>
        </div>
        <ul v-for="(data, item) in searchDataList" :key="`search${item}`">
          <li v-for="(search, index) in data" :key="`searchItem${item}_${index}`">
            <a @click="getSearchDataSource(item + 1, search)" :class="[(searchSelected[item] && searchSelected[item].id===search.id)?'active':'','clearfix']"><span class="fl">{{search.tradeName}}</span></a>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <div class="cat-line">
    <span class="line"></span>
    <span class="line-text">以下为选填内容</span>
    <span class="line"></span>
  </div>

  <div class="cat-set-container" v-if="classifyAttrs.length > 0">
    <label class="category-title">商品属性</label>
    <div class="cat-form">
      <div class="attribute">
        <div class="attribute-item form-item-flex" v-for="(i, index) in classifyAttrs" :key="`classifyAttrs${index}`">

          <label class="attr-label">{{i.attributeName}}</label>

          <input v-if="i.attributeType == 0" v-model="i.myValue" type="text" placeholder="请输入属性值" class="store-input form-control">

          <span v-else-if="i.attributeType == 2">
            <label v-for="(attr, item) in i.attributeValues" :key="`attrCheck${item}`" :class="'input-check-pub '+(i.myValue === attr.attributeValue ? 'input-check-active' : 'input-check')">
              <span v-if="i.myValue">
                <input type="checkbox" :name="i.attributeName" v-model="i.myValue" :value="attr.attributeValue" />
                <span class="input-check-icon" v-if="i.myValue.indexOf(attr.attributeValue) !== -1">
                  <span class="input-check-icon-text">✓</span>
                </span>
                <span>{{ attr.attributeValue }}</span>
              </span>
              <span v-else>
                <input type="checkbox" :name="i.attributeName" @change="changeAttributeValues" :value="attr.attributeValue" />{{ attr.attributeValue }}
              </span>
            </label>
          </span>
          <span v-else-if=" i.attributeType == 1">
            <select class="select-brand" v-model="i.myValue">
              <option value=""></option>
              <option :value="attr.attributeValue" v-for="attr in i.attributeValues">{{ attr.attributeValue }}</option>
            </select>
          </span>

          <span v-else-if="i.attributeType == 3">
            <label v-for="(attr, item) in i.attributeValues" :key="`radio${item}`" :class="'input-check-pub '+(i.myValue === attr.attributeValue ? 'input-check-active' : 'input-check')">
              <input type="radio" :name="i.attributeName" v-model="i.myValue" :value="attr.attributeValue" />
              <span class="input-check-icon" v-if="i.myValue === attr.attributeValue">
                <span class="input-check-icon-text">✓</span>
              </span>
              <span>{{attr.attributeValue}}</span>
            </label>
          </span>
        </el-form-item>
      </div>
      <div v-else class="nodate">
        暂无属性
      </div>
    </div>
  </div>
</div>


<div class="cat-set-container">
  <label class="category-title">交易设置<span class="category-title-tips">（仅在未获取到页面值时生效）</span></label>
  <div class="attribute cat-form">
    <span class="cat-form-tips" @click="dialog()">选填说明</span>
    <div class="attribute-item">
      <label class="attr-label">最小起定量</label>
      <input placeholder="请输入最小起定量" class="form-control" type="number" v-model="form.minQuantity" />
    </div>
    <div class="attribute-item">
      <label class="attr-label">库存数量</label>
      <input placeholder="请输入库存数量" class="attribute-item form-control" type="number" v-model="form.inventory" />
    </div>
  </div>
</div>

<div class="cat-set-container">
  <label class="category-title">支持自提</label>
  <label v-for="(i, index) in ifCanSelfPick" :key="`ifCanSelfPick${index}`" :class="'input-check-pub '+(form.ifCanSelfPick === i.value ? 'input-check-active' : 'input-check')">
    <input type="radio" name="ifCanSelfPick" v-model="form.ifCanSelfPick" :value="i.value" />
    <span class="input-check-icon" v-if="form.ifCanSelfPick === i.value">
      <span class="input-check-icon-text">✓</span>
    </span>
    <span>{{i.label}}</span>
  </label>
</div>

<div class="cat-set-container">
  <label class="category-title">快递运费</label>
  <label v-for="(i, index) in fareStyle" :class="'input-check-pub '+(form.fareStyle === i.value ? 'input-check-active' : 'input-check')">
    <input type="radio" name="fareStyle" v-model="form.fareStyle" :value="i.value" />
    <span class="input-check-icon" v-if="form.fareStyle === i.value">
      <span class="input-check-icon-text">✓</span>
    </span>
    <span>{{i.label}}</span>
  </label>
  <input v-if="form.fareStyle === 'FIXED'" class="fixed-number" type="number" v-model="form.money" />
</div>

<div class="footer">
  <button class="submit-btn" @click="submitData">确认</button>
</div>
